<script>
import { findGood } from '@/api/product'
import GoodsImage from '@/components/goods-image.vue'
import GoodsName from '@/components/goods-name.vue';
import GoodsRelevant from '@/components/goods-relevant.vue'
import GoodsSales from '@/components/goods-sales.vue';
import GoodsSku from '@/components/goods-sku.vue';
import XtxNumbox from '@/components/library/xtx-numbox.vue';
import XtxButton from "@/components/library/xtx-button.vue";
import { nextTick, provide, ref, watch } from "vue"
import { useRoute } from 'vue-router';
import GoodsTabs from '@/components/goods-tabs.vue';
import GoodsHot from '@/components/goods-hot.vue';
import GoodsWarn from '@/components/goods-warn.vue';
export default {
    name: 'XtxGoodsPage',
    components: {
        GoodsRelevant,
        GoodsImage,
        GoodsSales,
        GoodsName,
        GoodsSku,
        XtxNumbox,
        XtxButton,
        GoodsTabs,
        GoodsHot,
        GoodsWarn,

    },
    setup(){
        const num = ref(1)
        const goods = ref(null)
        const route = useRoute()
        watch(
            ()=>route.params.id,
            (newVal)=>{
                if(newVal && `/product/${newVal}` === route.path){
                    findGood(route.params.id).then(data=>{
                        goods.value = null
                        const {result} = data
                        nextTick(()=>{
                            result.skus.forEach(sku => {
                                const sortSpecs = []
                                result.specs.forEach(spec => {
                                sortSpecs.push(sku.specs.find(item => item.name === spec.name))
                                })
                                sku.specs = sortSpecs
                            })
                            goods.value = result
                        })
                    })
                }
            },
            {immediate: true}
        )
        const changeSku = (sku)=>{
            if(sku.skuId){
                goods.value.price = sku.price
                goods.value.oldPrice = sku.oldPrice
                goods.value.inventory = sku.inventory
            }
        }
        provide('goods',goods)
        return { goods,changeSku,num }
    }
}
</script>

<template>
    <div class='xtx-goods-page' v-if="goods">
        <div class="container">
            <!-- 面包屑 -->
            <XtxBread>
                <XtxBreadItem to="/">首页</XtxBreadItem>
                <XtxBreadItem :to="`/category/`+goods.categories[1].id">{{goods.categories[1].name}}</XtxBreadItem>
                <XtxBreadItem :to="`/category/`+goods.categories[0].id">{{goods.categories[0].name}}</XtxBreadItem>
                <XtxBreadItem >{{goods.name}}</XtxBreadItem>
            </XtxBread>
            <!-- 商品信息 -->
            <div class="goods-info">
                <div class="media">
                    <GoodsImage :images="goods.mainPictures"/>
                    <GoodsSales />
                </div>
                <div class="spec">
                    <GoodsName :goods="goods"/>
                    <GoodsSku :goods="goods" @change="changeSku"/>
                    <XtxNumbox label="数量" v-model="num" :max="goods.inventory" />
                    <XtxButton  type="primary" style="margin-top:20px;">加入购物车</XtxButton>
                </div>
            </div>
            <!-- 商品推荐 -->
            <GoodsRelevant :goodsId="goods.id"/>
            <!-- 商品详情 -->
            <div class="goods-footer">
                <div class="goods-article">
                    <!-- 商品+评价 -->
                    <div class="goods-tabs">
                        <GoodsTabs />
                    </div>
                    <!-- 注意事项 -->
                    <div class="goods-warn">
                        <GoodsWarn />
                    </div>
                </div>
                <!-- 24热榜+专题推荐 -->
                <div class="goods-aside">
                    <GoodsHot :goodsId="goods.id" :type="1" />
                    <GoodsHot :goodsId="goods.id" :type="2" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer{
    margin-top: 20px;
    display: flex;
    .goods-tabs{
        background-color: #fff;
        margin-right: 0.8vw;
    }
    .goods-warn{
        margin-right: 0.8vw;
    }
}
</style>
